<template>
  <div class="xui-grid-avg-2 detail">
    <div class="xui-padding-right">
      <swiper id="gallery" :options="swiperOption" class="list">
        <swiper-slide class="gallery-item cursor-point"  v-for="(img, index) in images" :key="index"  :data-src="img">
          <div @mousemove="chooseImg(index)">
            <img-box width="80" height="80" :imgSrc="img"></img-box>
          </div>
        </swiper-slide>
        <!-- <div class="swiper-pagination" slot="pagination"></div> -->
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
      <img @click="openGallery" class="xui-margin-top-sm" :src="curImg" alt="" style="width:100%;" height="auto">
    </div>
    <div v-if="isCN">
      <h4>{{article.title}}</h4> 
      <p class="xui-margin-bottom-xs" v-for="(p,index) in article.content.split('\n')" :key="index">{{p}}</p>
    </div>
    <div v-else>
      <h4>{{article.titleEn}}</h4>
      {{article.contentEn}}
    </div>
  </div>
</template>
<script>
import ImgBox from "@/components/widge/img-box";
import { getClass, getDisplayItem, getItemDetail } from "@/api/specExhib";
import { getLang } from "@/utils/lang";
import VueGallery from "vue-gallery";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "lightgallery.js/dist/css/lightgallery.css";
import "lightgallery.js/dist/js/lightgallery.js";
import "@/plugin/lg-zoom.js";
export default {
  components: {
    gallery: VueGallery,
    ImgBox
  },
  data() {
    return {
      hoverImgIndex: 0,
      swiperOption: {
        slidesPerView: 5,
        // spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      images: [
        // "https://sachinchoolur.github.io/lightgallery.js/static/img/thumb-4.jpg",
        // "https://sachinchoolur.github.io/lightgallery.js/static/img/thumb-1.jpg",
        // "https://dummyimage.com/1280/000000/ffffff",
        // "https://dummyimage.com/400/000000/ffffff",
        // "https://sachinchoolur.github.io/lightgallery.js/static/img/thumb-4.jpg",
        // "https://sachinchoolur.github.io/lightgallery.js/static/img/thumb-1.jpg",
        // "https://dummyimage.com/1280/000000/ffffff",
        // "https://dummyimage.com/400/000000/ffffff"
      ],
      article: {
        title: "",
        picUrl: "",
        content: "",
        pictrues: []
      }
    };
  },
  computed: {
    itemId() {
      return this.$route.params.itemId;
    },
    typeId() {
      return this.$route.params.typeId;
    },
    isCN() {
      return getLang() !== "en";
    },
    curImg() {
      return this.images[this.hoverImgIndex];
    }
  },
  methods: {
    getItemDetail() {
      getItemDetail(this.itemId).then(res => {
        this.article = res.data;
        this.images = res.data.pictrues;
        setTimeout(() => {
          this.initGallery();
        }, 50);
      });
    },
    handleClose() {
      console.log("close event");
    },
    chooseImg(index) {
      this.hoverImgIndex = index;
    },
    initGallery() {
      lightGallery(document.getElementById("gallery"), {
        loop: true,
        fourceAutoply: false,
        autoplay: false,
        thumbnail: false,
        speed: 400,
        scale: 1,
        keypress: true,
        mode: "lg-slide",
        cssEasing: "cubic-bezier(0.25, 0, 0.25, 1)",
        download: true,
        counter: true,
        zoom: true,
        selector: ".gallery-item"
      });
    },
    openGallery(){
      
    }
  },
  mounted() {
    this.getItemDetail();
  }
};
</script>

<style lang="less" scoped>
.swiper-button-next {
  background-size: 16px;
}
.swiper-button-prev {
  background-size: 16px;
}
</style>

